//折线图所需要的组件
import * as echarts from 'echarts/core'
// import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import {//堆叠面积图表组件
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components'
var myChart1 //基础折现图图表实例
function initBasicLineChart(charDom,xAxisData, seriesData) {
    echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
    // var chartDom = document.getElementById('main')//这是js中获取html文档中dom元素的方式，不适用与vue
    if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
      myChart1.dispose();
    }
    myChart1 = echarts.init(charDom) //3.访问dom
    var option
  
    option = {
      xAxis: {
        type: 'category',
        data: xAxisData,
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: seriesData,
          type: 'line',
        },
      ],
    }
  
    option && myChart1.setOption(option)
  }

var myChart2//堆叠面积图图表实例
  function initStackedAreaChart(charDom,xAxisData, tempMinSeries, tempMaxSeries) {
    echarts.use([
      TitleComponent,
      ToolboxComponent,
      TooltipComponent,
      GridComponent,
      LegendComponent,
      LineChart,
      CanvasRenderer,
      UniversalTransition,
    ])
    if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
      myChart2.dispose();
    }
    myChart2 = echarts.init(charDom)
    var option
    option = {
      title: {
        text: 'Stacked Area Chart',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: ['tempMin', 'tempMax'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xAxisData,
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: 'tempMin',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: tempMinSeries,
        },
        {
          name: 'tempMax',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series',
          },
          data: tempMaxSeries,
        },
      ],
    }
    option && myChart2.setOption(option)
  }

  export {initBasicLineChart,initStackedAreaChart}
